<template>
	<view class="xqBody">



		<view class="listItem" style="border-bottom-style:solid;">
			<view class="ItemView">
				<text class="ItemName">操作日期:</text>
				<text class="ItemContent">{{details.time}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">工序卡号:</text>
				<text class="ItemContent">{{details.kh}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">操作工人:</text>
				<text class="ItemContent">{{details.name}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">产品名称:</text>
				<text class="ItemContent">{{details.cpname}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">规格型号:</text>
				<text class="ItemContent">{{details.ggxh}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">派工数量:</text>
				<text class="ItemContent">{{details.number}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">开工时间:</text>
				<text class="ItemContent">{{details.starTime}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">完成时间:</text>
				<text class="ItemContent">{{details.endTime}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">完成数量:</text>
				<text class="ItemContent">{{details.endNuber}}</text>
			</view>
			<view class="ItemView">
				<text class="ItemName">操作状态:</text>
				<text class="ItemContent">{{details.type}}</text>
			</view>
		</view>

		<view :class="['gxTitle',scrollTop>195?'fixeds':'']">工序明细表</view>
		<!--占位-->
		<view v-if="scrollTop>195" style="width:100%;height:100rpx;"></view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-for="(item,index) in lists" :key="index">
				<view class="listItem">
					<view class="ItemView">
						<text class="ItemName">日期:</text>
						<text class="ItemContent">{{item.time}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">工序号:</text>
						<text class="ItemContent">{{item.kh}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">操作工人:</text>
						<text class="ItemContent">{{item.name}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">工序名称:</text>
						<text class="ItemContent">{{item.cpname}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">规格型号:</text>
						<text class="ItemContent">{{item.ggxh}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">工序标识:</text>
						<text class="ItemContent">{{item.number}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">开工时间:</text>
						<text class="ItemContent">{{item.starTime}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">完工时间:</text>
						<text class="ItemContent">{{item.endTime}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">合格数量:</text>
						<text class="ItemContent">{{item.endNuber}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">返工数量:</text>
						<text class="ItemContent">{{item.type}}</text>
					</view>
					<view class="ItemView">
						<text class="ItemName">报废数量:</text>
						<text class="ItemContent">{{item.type}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		listProcedureCardDetailVoMobile
	} from '@/common/api/table.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				scrollTop: 0,
				details: {
					time: '2021-10-12',
					kh: '2020125',
					name: '干饭王干饭王',
					cpname: '扳手01',
					ggxh: 'qwe-qwqe-ddsssda',
					number: '100件',
					starTime: '2021-01-12',
					endTime: '2021-02-10',
					endNuber: '100件',
					type: "已完成"
				},
				lists: [{
						time: '2021-10-12',
						kh: '2020125',
						name: '干饭王干饭王',
						cpname: '扳手01',
						ggxh: 'qwe-qwqe-ddsssda',
						number: '100件',
						starTime: '2021-01-12',
						endTime: '2021-02-10',
						endNuber: '100件',
						type: "已完成"
					},
					{
						time: '2021-10-12',
						kh: '2020125',
						name: '干饭王',
						cpname: '扳手01',
						ggxh: 'qwe-qwqe-dd',
						number: '100件',
						starTime: '2021-01-12',
						endTime: '2021-02-10',
						endNuber: '100件',
						type: "已完成"
					}
				],
				detailsObj:null,

				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
						// icon: this.$staticUrl + '/xcxImgs/wushuju.png'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						// src: this.$baseUrl + '/images/WechatIMG748.png', //回到顶部的logo
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
				// 视频列表数据
				videoList: [],
				
			}
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},


		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: `add-processCard?obj=${JSON.stringify(this.detailsObj)}`
			})
		},

		onLoad(e) {
			if('item' in e){
				let obj = JSON.parse(e.item);
				console.log(obj)
				// setTimeout(() => {
				// 	this.mescroll.triggerDownScroll();
				// }, 500)
				this.detailsObj = obj;
				listProcedureCardDetailVoMobile({workProcedureDetailId:obj.productionWorkProcedureDetailId})
				.then(res=>{
					console.log(111,res)
					
				})
			}
		},


		methods: {

			/*下拉刷新的回调*/
			downCallback() {
				// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000)
			},

			/*上拉加载的回调*/
			upCallback(page) {
				let obj = {
					page: page.num, // 页码, 默认1
					limit: page.size, // 页长, 默认10条
					category_id: this.gxFlData[this.showIndex].id
				};
				this.mescroll.endBySize(0, 0);
				listProcedureCardDetailVoMobile(obj)
					.then(res => {
				       if (res.code !=1) {
				       	this.mescroll.endBySize(0, 0);
				       	return;
				       };
				       if (res.data.length > 0) {
				       	// 接口返回的当前页数据列表 (数组)
				       	let curPageData = res.data;
				       	// 接口返回的当前页数据长度 
				       	let curPageLen = curPageData.length;
				       	// 接口返回的总数据量
				       	let totalSize = res.total;
				       	if (page.num == 1) this.videoList = []; //如果是第一页需手动置空列表
				       	this.videoList = this.videoList.concat(curPageData); //追加新数据
				       	// 请求成功,隐藏加载状态
				       	this.mescroll.endBySize(curPageLen, totalSize);
				       } else {
				       	this.videoList = [];
				       	this.mescroll.endBySize(0, 0);
				       }
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	.xqBody {
		width: 750rpx;
		background-color: white;
	}

	.listItem {
		width: 720rpx;
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 15rpx;
		border-bottom: 1rpx dashed #3168ff;
	}

	.ItemView {
		width: 350rpx;
		display: flex;
		margin-left: 10rpx;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		background-color: white;
	}

	.ItemName {
		/* width:100rpx; */
		/* lines: 1;
		text-overflow: ellipsis; */
		font-size: 30rpx;
	}

	.ItemContent {
		width: 220rpx;
		// margin-left: 10rpx;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gxTitle {
		width: 750rpx;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		color: #007AFF;
		text-align: center;
		font-size: 45rpx;
		font-weight: bold;
		letter-spacing: 10rpx;
	}

	.fixeds {
		position: fixed;
		z-index: 1;
		top: 0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
